<template>
	<view class="custom-navigation-bg">
		<image v-if="props.navigationImage == true" src="@/static/image/bg_navigation.jpg" mode="widthFix"
			style="position: absolute; width: 100%; height: 100%;" />
	</view>

	<view class="custom-navigation" :style="{
	    paddingTop: statusBarHeight + 'px',
	    height: statusBarHeight + navHeight + 'px',
	    backgroundColor: props.navigationImage | props.hideNavigation === true ? 'transparent' : 'white'
	  }">
		<view v-if="props.hideBack != true" class="left-button" @click="goBackAction"
			:style="{width: navHeight + 'px', height: navHeight + 'px'}">
			<image v-if="props.navigationImage === true" src="@/static/image/base/icon_back_white.png" mode="widthFix"
				style="width: 10px; height: 10px;" />
			<image v-else src="@/static/image/base/icon_back.png" mode="widthFix" style="width: 10px; height: 10px;" />
		</view>

		<view class="title-view"
			:style="{ width: screenWidth - 88 + 'px' , color: props.navigationImage === true ? 'white' : 'black'}">
			<text style="font-size: 16px; font-weight: bold;">{{ props.title }}</text>
		</view>

		<view v-if="props.hideBack != true" class="right-button"
			:style="{width: navHeight + 'px', height: navHeight + 'px'}">

		</view>
	</view>
</template>

<script setup lang="uts">
	import { ref, onMounted, computed } from 'vue'

	const screenWidth = ref(uni.getWindowInfo().screenWidth)
	const statusBarHeight = ref<number | undefined>(0)
	const navHeight = computed(() => 44)

	const emit = defineEmits(['updateStatusBarHeight', 'goBackAction'])

	const props = defineProps<{
		title ?: string
		navigationImage ?: boolean
		hideNavigation ?: boolean
		interceptBack ?: boolean
		hideBack ?: boolean
	}>()

	onMounted(() => {
		statusBarHeight.value = uni.getWindowInfo().statusBarHeight
		emit('updateStatusBarHeight', (statusBarHeight.value ?? 0) + (navHeight.value ?? 0))
	})

	const goBackAction = () => {
		if (props.interceptBack == true) {
			emit('goBackAction')
		} else {
			uni.navigateBack()
		}
	}
</script>

<style scoped>
	.custom-navigation-bg {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: -1;
	}

	.custom-navigation {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 999;
		box-sizing: border-box;
		flex-direction: row;
	}

	.title-view {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.left-button,
	.right-button {
		position: absolute;
		display: flex;
		align-items: center;
		box-sizing: border-box;
	}

	.left-button {
		left: 16px;
		justify-content: flex-start;
	}

	.right-button {
		right: 16px;
		justify-content: flex-end;
	}
</style>